<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="900px"
  top="5vh"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 出入库记录
  .modal-content
    el-table(
      height="500px"
      :data="tableData"
      :header-cell-style="{ fontSize: '14px', color: '#64698F', background: '#F8F7FC' }"
      border
      style="width: 100%"
      empty-text="未找到符合条件的内容"
    )
      el-table-column(align="center" min-width="60" label="操作类型" prop="operType")
      el-table-column(align="center" min-width="60" label="操作类容" prop="operContents")
      el-table-column(align="center" min-width="60" label="操作人" prop="createByName")
      el-table-column(align="center" min-width="60" label="操作时间")
        template(slot-scope="scope") {{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}
    .index-pagination
      .pagination-total 共 {{total}} 条
      .pagination-sizes 10 条/页
      el-pagination(
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="currentChange"
      )
</template>

<script>
import { getMaterialsLogsList } from 'api'
export default {
  name: 'sampleRecordModal',
  props: {
    show: Boolean,
    item: Object
  },
  data () {
    return {
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableData: []
    }
  },
  methods: {
    beforeOpen () {
      this.getList()
    },
    currentChange (page) {
      this.currentPage = page
      this.getList()
    },
    async getList () {
      try {
        const { ResultSet } = await this.$axios.post(getMaterialsLogsList, { content: { materialsId: this.item.materialId, currentPage: this.currentPage, pageLines: this.pageSize } })
        this.total = ResultSet.recordNumber
        this.tableData = ResultSet.userData.MaterialsLogsList
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    handleClose () {
      this.$emit('close')
    }
  },
}
</script>

<style lang="scss" scoped>
.index-pagination {
margin-top: 24px;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 14px;
color: #7A7A7A;
.pagination-total {
  margin-right: 10px;
}
.pagination-sizes {
  margin-right: 10px;
}
}
</style>